<template>
  <div class="pump-details">
    <div class="device-details__name">{{ info.deviceName }}</div>
    <div class="device-details__item-wrapper">
      <div class="device-details__item-wrapper--left">
        <img class="device-details__item-img" :src="img_pump" />
      </div>
      <div class="device-details__item-wrapper--right">
        <div class="device-details__index-cell">
          <div class="device-details__index-cell--left">运行状态</div>
          <div class="device-details__index-cell--right">
            <span v-if="info.pointDiYxztValue === '1'" class="device-details__status device-details__status--1"
              >运行</span
            >
            <span v-else-if="info.pointDiYxztValue === '0'" class="device-details__status device-details__status--2"
              >停止</span
            >
            <span v-else>-</span>
          </div>
        </div>
        <div class="device-details__index-cell">
          <div class="device-details__index-cell--left">故障状态</div>
          <div class="device-details__index-cell--right">
            <span v-if="info.pointDiGzztValue === '0'" class="device-details__status device-details__status--1"
              >运行</span
            >
            <span v-else-if="info.pointDiGzztValue === '1'" class="device-details__status device-details__status--2"
              >停止</span
            >
            <span v-else>-</span>
          </div>
        </div>
        <div class="device-details__index-cell">
          <div class="device-details__index-cell--left">手自动状态</div>
          <div class="device-details__index-cell--right">
            <span v-if="info.pointDiSdzdValue === '0'" class="device-details__status device-details__status--2"
              >手动</span
            >
            <span v-else-if="info.pointDiSdzdValue === '1'" class="device-details__status device-details__status--1"
              >自动</span
            >
            <span v-else>-</span>
          </div>
        </div>
      </div>
    </div>
    <el-table class="device-details__table" size="small" :data="repairRecord">
      <el-table-column prop="manufacturerName" label="厂商"> </el-table-column>
      <el-table-column prop="model" label="型号"> </el-table-column>
      <el-table-column prop="thisUseTime" label="本次运行时间(h)"> </el-table-column>
      <el-table-column prop="totalUseTime" label="累计运行时间"> </el-table-column>
      <el-table-column prop="maintainTime" label="最近保养"> </el-table-column>
      <el-table-column prop="maintainCount" label="维修次数"> </el-table-column>
    </el-table>
    <div class="device-details__graph-list-wrapper">
      <div class="device-details__graph-list">
        <div class="device-details__graph-item" v-for="item in deviceGraph" :key="item.id">
          <div class="device-details__graph-item--left">
            <img :src="getImg(item.deviceCategoryId, item.deviceTypeId)" />
          </div>
          <div class="device-details__graph-item--right">
            <div class="device-details__graph-item__title">{{ item.deviceName }}</div>
            <div class="device-details__graph-item__region">{{ item.regionName }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import CORE from '@/CORE'

import { deviceHospitalDto } from '@admin/views/Monitor/Source/api/hospital/dto.js'
import deviceHospitalApi from '@admin/views/Monitor/Source/api/hospital/api.js'
import img_pump from '@admin/views/Monitor/Source/img/device/pump.png'

export default {
  name: 'PumpDetails',
  data() {
    return {
      img_pump,
      info: { ...deviceHospitalDto() },
      repairRecord: [],
      deviceGraph: [],
    }
  },
  methods: {
    /**
     * 获取图片
     */
    getImg(deviceCategoryId, deviceTypeId) {
      const type = ['2', '3', '4'].includes(deviceCategoryId) ? 'point' : deviceTypeId
      return CORE.common(`tree/${deviceCategoryId}/${type}.png`)
    },
  },
  mounted() {
    deviceHospitalApi.getDetail({ deviceId: '731213022993002496' }).then((res) => {
      this.info = res.deviceHospital
      this.repairRecord = [res.repairRecord]
      this.deviceGraph = res.deviceGraph || []
    })
  },
}
</script>

<style lang="scss">
@import '@admin/views/Monitor/Source/device-details.scss';

@import './index.scss';
</style>
